<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Posts &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
  <script src="../static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
    <!-- 引入公共的顶部 -->
    <?php include "public/_navBar.php"?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>所有文章</h1>
        <a href="post-add.php" class="btn btn-primary btn-xs">写文章</a>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="page-action">
        <!-- show when multiple checked -->
        <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
        <form class="form-inline">
          <select id="category" name="" class="form-control input-sm">
            <option value="all">所有分类</option>
            <!-- <option value="">未分类</option> -->
          </select>
          <select id="status" name="" class="form-control input-sm">
            <option value="all">所有状态</option>
            <option value="drafted">草稿</option>
            <option value="published">已发布</option>
            <option value="trashed">已删除</option>
          </select>
          <button type="button" id="choose" class="btn btn-default btn-sm">筛选</button>
        </form>
        <ul class="pagination pagination-sm pull-right">
          <!-- 生成分页 -->
          
        </ul>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>标题</th>
            <th>作者</th>
            <th>分类</th>
            <th class="text-center">发表时间</th>
            <th class="text-center">状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
          
        </tbody>
      </table>
    </div>
  </div>

  <!-- 引入公共的侧边栏 -->
  <?php 
    $currentPage = 'posts';
    $currentPage1 = 'posts';
   ?>
  <?php include "public/_aside.php"?>

  <script src="../static/assets/vendors/jquery/jquery.min.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script>NProgress.done()</script>
</body>
<script>
    //页面一打开就应该发送ajax请求拿到所有的文章数据
    $(function(){
        //生成分页
        //记录当前处于第几页
        var currentPage = 1;

        //总共有多少页
        var pageCount = 10;

        //一页有多少条
        var pageSize = 10;

        makePageButton();

        //封装动态生成分页
        function makePageButton(){
            //从第几页开始
            var start = currentPage - 2;

            //判断如果开始页小于1的时候,强制从第一页开始
            if(start < 1){
                start = 1;
            }
            //从第几页结束
            var end = start + 4;

            //如果已经是最后一页,强制设置为最后一页
            //判断最后一页是不是大于总共的页数,那么强制将最后一页的页数设置为总共的页数
            if(end > pageCount){
                end = pageCount;
            }
            var html = "";

            //判断是不是第一页,如果是第一页就不显示上一页这个按钮
            //上一页
            if(currentPage != 1){
                html += `<li class="item"  data-page = "${currentPage - 1}"><a href="#">上一页</a></li>`;
            }

            //循环有多少个分页
            for(var i = start ;i<=end;i++){
                //判断当前页是不是高亮显示
                if(i == currentPage){
                    html +=`<li class="item active" data-page = "${i}"><a href="#" >${i}</a>`;
                }else{
                    html +=`<li class="item" data-page = "${i}"><a href="#" >${i}</a>`;
                }
                
            }
            //下一页
            if(currentPage != pageCount){
                html += `<li class="item" data-page = "${currentPage + 1}"><a href="#" >下一页</a></li>`;
            }

            $(".pagination").html(html);

        }
        //将文章的状态用对象存储起来,以便后期使用

        var statusData = {
          drafted : "草稿",
          published : "已发布",
          trashed : "已删除"
        }
        $.ajax({
            type : "post",
            url : "api/_getPosts.php",
            data:{
                "currentPage":1,
                "pageSize" :10,
                "status" : $("#category").val(),
                "categoryId" : $("#category").val()
            },
            success : function(res){
                if(res.code == 1){
                    //在每次请求数据的时候都会重新动态生成一次分页代码
                    makePageButton();
                    var str = "";
                    var data = res.data;
                    //循环遍历生成表格中的数据
                    
                    $.each(data,function(index,val){
                        str +=`<tr data-postid="${val.id}">
                                  <td class="text-center"><input type="checkbox"></td>
                                  <td>${val.title}</td>
                                  <td>${val.nickname}</td>
                                  <td>${val.name}</td>
                                  <td class="text-center">${val.created}</td>
                                  <td class="text-center">${statusData[val.status]}</td>
                                  <td class="text-center">
                                    <a href="javascript:;" class="btn btn-default btn-xs">编辑</a>
                                    <a href="javascript:;" class="btn btn-danger btn-xs del">删除</a>
                                  </td>
                                </tr>`;
                    });
                    $("tbody").html(str);
                }
            }
        });

        //使用事件委托给每个分页按钮注册点击事件
        $(".pagination").on("click",".item",function(){
            //根据当前的页码获取数据
            currentPage = parseInt($(this).attr("data-page"));
            // console.log(currentPage);
            //根据当前页发送请求获取数据
            $.ajax({
                type : "post",
                url : "api/_getPosts.php",
                data : {
                    "currentPage" :currentPage,
                    "pageSize" : pageSize,
                    "status" : $("#status").val(),
                    "categoryId" : $("#category").val()
                },
                success:function(res){
                    if(res.code == 1){
                        //在每次请求数据的时候都会重新动态生成一次分页代码
                        makePageButton();
                        var str = "";
                        var data = res.data;
                        //循环遍历生成表格中的数据
                        $.each(data,function(index,val){
                            str +=`<tr data-postid="${val.id}">
                                      <td class="text-center"><input type="checkbox"></td>
                                      <td>${val.title}</td>
                                      <td>${val.nickname}</td>
                                      <td>${val.name}</td>
                                      <td class="text-center">${val.created}</td>
                                      <td class="text-center">${statusData[val.status]}</td>
                                      <td class="text-center">
                                        <a href="javascript:;" class="btn btn-default btn-xs">编辑</a>
                                        <a href="javascript:;" class="btn btn-danger btn-xs del">删除</a>
                                      </td>
                                    </tr>`;
                        });
                        $("tbody").html(str);
                    }
                }             
            });
        });

        //加载所有的分类数据
        $.ajax({
            type : "post",
            url : "api/_getCategoriesData.php",
            success : function(res){
                // console.log(res);
                if(res.code == 1){
                    var data = res.data;
                    var str = "";
                    //循环遍历生成分类的下拉框数据
                    $.each(data,function(index,val){
                        str += `<option value="${val.id}">${val.name}</option>`;
                    });
                    $(str).appendTo("#category");
                }
            }
        });

        //筛选数据
        $("#choose").on("click",function(){
            //点击筛选时,获取分类和状态两个下拉框的值
            
            //获取文章状态的下拉框中的数据
            var status = $("#status").val();
            //获取分类和状态选中的数据
            var categoryId = $("#category").val();
            $.ajax({
                type : "post",
                url : "api/_getPosts.php",
                data : {
                    "currentPage" :currentPage,
                    "pageSize" : pageSize,
                    "status" : status,
                    "categoryId" : categoryId
                },
                success : function(res){
                  if(res.code == 1){
                      var str = "";
                      var data = res.data;
                      //循环遍历生成表格中的数据
                      $.each(data,function(index,val){
                          str +=`<tr>
                                    <td class="text-center"><input type="checkbox"></td>
                                    <td>${val.title}</td>
                                    <td>${val.nickname}</td>
                                    <td>${val.name}</td>
                                    <td class="text-center">${val.created}</td>
                                    <td class="text-center">${statusData[val.status]}</td>
                                    <td class="text-center">
                                      <a href="javascript:;" class="btn btn-default btn-xs">编辑</a>
                                      <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
                                    </td>
                                  </tr>`;
                      });
                      $("tbody").html(str);
                  }
                    
                }
            });
        });


        //删除
        $("tbody").on("click",".del",function(){
            //获取要删除的这行数据的id
            var postId = $(this).parents("tr").attr("data-postid");
            var postTr = $(this).parents("tr")
            // console.log(postId);
            $.ajax({
                type:"post",
                url:"api/_delPosts.php",
                data:{
                    "postId" : postId
                },
                success:function(res){
                    postTr.remove();
                }
            });
        });



    });
</script>
</html>
